<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="appId">
                  <el-input v-model="searchModel.id" placeholder="appId" />
                </el-form-item>

                <el-form-item label="商户号">
                  <el-input v-model="searchModel.userId" placeholder="商户号" />
                </el-form-item>

                <el-form-item label="应用状态">
                  <el-radio-group v-model="searchModel.status" @change="search">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="1">上线</el-radio-button>
                    <el-radio-button label="0">下线</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="mini"
              style="width: 100%"
            >
              <el-table-column prop="id" label="appId" />

              <el-table-column prop="userId" label="商户号" />

              <el-table-column prop="userName" label="商户名称" />

              <el-table-column label="应用状态">
                <template slot-scope="scope">
                  <span class="text-success" v-if="scope.row.status == '1'"
                    >上线</span
                  >
                  <span v-if="scope.row.status == '0'">下线</span>
                </template>
              </el-table-column>

              <el-table-column label="是否开启白名单效验">
                <template slot-scope="scope">
                  <span class="text-success" v-if="scope.row.checkIp == true"
                    >开启</span
                  >
                  <span v-if="scope.row.checkIp == false">关闭</span>
                </template>
              </el-table-column>
              <el-table-column prop="whiteIps" label="白名单ips" />
              <el-table-column prop="publicKey" label="平台公钥">
                <template slot-scope="scope">
                  <div v-if="scope.row.publicKey">
                    <el-button
                      style="margin-left: 8px"
                      v-permission="['ADMIN', 'open-app::select-appPublickey']"
                      size="mini"
                      type="text"
                      plain
                      @click="doSelectAppKey(scope.row.id)"
                    >
                      查看平台公钥
                    </el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <div>
                    <el-button
                      v-permission="['ADMIN', 'open-app::update']"
                      size="mini"
                      type="text"
                      @click="update(scope.row)"
                    >
                      修改应用
                    </el-button>
                  </div>
                  <div>
                    <el-button
                      v-permission="['ADMIN', 'open-app::update-whiteIps']"
                      size="mini"
                      type="text"
                      @click="updateWhiteIps(scope.row)"
                    >
                      修改ip白名单
                    </el-button>
                  </div>
                  <el-popover
                  v-if="scope.row.status === 0"
                    placement="top"
                    width="200"
                    :ref="'openOpenApp' + scope.row.id"
                    trigger="click"
                  >
                    <p>确定上线应用吗？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button
                        size="mini"
                        type="text"
                        @click="$refs['openOpenApp' + scope.row.id].doClose()"
                        >取消</el-button
                      >
                      <el-button
                        :loading="opLoading"
                        type="primary"
                        size="mini"
                        @click="
                          doOpenOpenApp(scope.row.id)
                        "
                        >确定</el-button
                      >
                    </div>

                    <el-button
                    v-if="scope.row.status === 0"
                      v-permission="['ADMIN', 'open-app::open']"
                      type="text"
                      plain
                      size="mini"
                      slot="reference"
                      :value="scope.row.id"
                    >
                      应用上线
                    </el-button>
                  </el-popover>

                  <el-popover
                  v-if="scope.row.status === 1"
                    placement="top"
                    width="200"
                    :ref="'closedOpenApp' + scope.row.id"
                    trigger="click"
                  >
                    <p>确定下线应用吗？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button
                        size="mini"
                        type="text"
                        @click="$refs['closedOpenApp' + scope.row.id].doClose()"
                        >取消</el-button
                      >
                      <el-button
                        :loading="opLoading"
                        type="primary"
                        size="mini"
                        @click="
                          doClosedOpenApp(scope.row.id)
                        "
                        >确定</el-button
                      >
                    </div>

                    <el-button
                    v-if="scope.row.status === 1"
                      v-permission="['ADMIN', 'open-app::closed']"
                      type="text"
                      plain
                      size="mini"
                      slot="reference"
                      :value="scope.row.id"
                    >
                      应用下线
                    </el-button>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize"
                :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 修改应用 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="'修改应用 ' + updateForm.id"
      class="dialog-action"
      width="50%"
      :visible.sync="updateDialog"
    >
      <el-form
        label-width="100px"
        :model="updateForm"
        size="mini"
        :rules="updateRules"
        ref="updateForm"
      >
        <el-form-item label="商户号">
          <span>{{ updateForm.userId }}</span>
        </el-form-item>

        <el-form-item label="商户名称">
          <span>{{ updateForm.userName }}</span>
        </el-form-item>

        <el-form-item label="应用公钥" prop="appPublicKey">
          <el-input
            type="textarea"
            :rows="8"
            v-model="updateForm.appPublicKey"
            placeholder="请输入应用公钥"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate" :loading="opLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改应用ip白名单 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="'修改ip白名单 ' + updateWhiteIpsForm.id"
      class="dialog-action"
      width="50%"
      :visible.sync="updateWhiteIpsDialog"
    >
      <el-form
        label-width="100px"
        :model="updateWhiteIpsForm"
        size="mini"
        :rules="updateWhiteIpsRules"
        ref="updateWhiteIpsForm"
      >
        <el-form-item label="商户号">
          <span>{{ updateWhiteIpsForm.userId }}</span>
        </el-form-item>

        <el-form-item label="商户名称">
          <span>{{ updateWhiteIpsForm.userName }}</span>
        </el-form-item>

        <el-form-item label="白名单ips" prop="whiteIps">
          <el-input
            type="textarea"
            :rows="8"
            v-model="updateWhiteIpsForm.whiteIps"
            placeholder="请输入白名单ips，多个ip用英文逗号隔开"
          ></el-input>
        </el-form-item>

        <el-form-item prop="openChargeNotify" label="是否开启白名单效验">
          <el-switch
            v-model="updateWhiteIpsForm.checkIp"
            active-color="#13ce66"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateWhiteIpsDialog = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateWhiteIps" :loading="opLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 复制公钥 -->
    <el-dialog
      title="平台公钥"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      class="dialog-action"
      width="50%"
      :visible.sync="publicPasswordDialog"
    >
      <el-form :model="publicForm" label-width="100px">
        <el-form-item label="平台公钥:">
          <span class="text-danger">{{ publicForm.publicKey }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="opLoading" type="primary" @click="doCopy($event)"
          >复制</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import clipboard from "../../utils/clipboard";
import {
  searchOpenApp,
  selectPublicAppkey,
  updateOpenApp,
  updateOpenAppWhiteIps,
  closedOpenApp,
  openOpenApp
} from "@/api/business";
const defaultModel = {
  pageNo: 1,
  count: 0,
  pageSize: 10,
  userId: "",
  status: "",
};
export default {
  components: {},
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      updateDialog: false,
      updateForm: {
        id: "",
      },
      updateRules: {
        publicKey: [
          { required: true, message: "请输入平台公钥", trigger: "blur" },
        ],
        appPublicKey: [
          { required: true, message: "请输入应用公钥", trigger: "blur" },
        ],
      },
      updateWhiteIpsDialog: false,
      updateWhiteIpsForm: {
        id: "",
      },
      updateWhiteIpsRules: {
        whiteIps: [
          { required: true, message: "请输入平台公钥", trigger: "blur" },
        ],
      },
      loading: false,
      opLoading: false,
      publicPasswordDialog: false,
      publicForm: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //修改
    update(row) {
      this.updateDialog = true;
      this.updateForm = _.cloneDeep(row);
    },
    //确认修改
    doUpdate() {
      this.opLoading = true;
      let form = {
        id: this.updateForm.id,
        appPublicKey: this.updateForm.appPublicKey,
      };
      updateOpenApp(form).then((resp) => {
        if (resp.success) {
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500,
          });
          this.updateDialog = false;
          this.search();
        }
        this.opLoading = false;
      });
    },
    //修改
    updateWhiteIps(row) {
      this.updateWhiteIpsDialog = true;
      this.updateWhiteIpsForm = _.cloneDeep(row);
    },
    //确认修改
    doUpdateWhiteIps() {
      this.opLoading = true;
      if(toString.call(this.updateWhiteIpsForm.whiteIps) == "[object Array]"){
        let form = {
        id: this.updateWhiteIpsForm.id,
        whiteIps:  this.updateWhiteIpsForm.whiteIps.join(),
        checkIp: this.updateWhiteIpsForm.checkIp,
      };
      updateOpenAppWhiteIps(form).then((resp) => {
        if (resp.success) {
          this.$notify({
            title: "修改白名单ips成功",
            type: "success",
            duration: 2500,
          });
          this.updateWhiteIpsDialog = false;
          this.search();
        }
        this.opLoading = false;
      });
      }
      if(toString.call(this.updateWhiteIpsForm.whiteIps) == "[object String]"){
        let form = {
        id: this.updateWhiteIpsForm.id,
        whiteIps: this.updateWhiteIpsForm.whiteIps,
        checkIp: this.updateWhiteIpsForm.checkIp,
      };
      updateOpenAppWhiteIps(form).then((resp) => {
        if (resp.success) {
          this.$notify({
            title: "修改白名单ips成功",
            type: "success",
            duration: 2500,
          });
          this.updateWhiteIpsDialog = false;
          this.search();
        }
        this.opLoading = false;
      });
      }
       
      
     
     
    },
    //上线
    doOpenOpenApp(id){
      this.opLoading = true;
      let form = {
        id:id
      };
      openOpenApp(form).then((resp) => {
        if (resp.success) {
          this.$notify({
            title: "应用上线成功",
            type: "success",
            duration: 2500,
          });
          this.$refs["openOpenApp" + id].doClose();
          this.search();
        }
        this.opLoading = false;
      });
    },
     //下线
     doClosedOpenApp(id){
      this.opLoading = true;
      let form = {
        id:id
      };
      closedOpenApp(form).then((resp) => {
        if (resp.success) {
          this.$notify({
            title: "应用下线成功",
            type: "success",
            duration: 2500,
          });
          this.$refs["closedOpenApp" + id].doClose();
          this.search();
        }
        this.opLoading = false;
      });
    },
    // 查看秘钥
    doSelectAppKey(id) {
      let form = {
        id: id,
      };
      selectPublicAppkey(form).then((resp) => {
        if (resp.success) {
          this.publicForm = resp.data;
          this.publicPasswordDialog = true;
        }
      });
    },
    //复制链接
    doCopy(e) {
      let publicKey = this.publicForm.publicKey;
      let info = publicKey;
      clipboard(info, e);
    },

    search() {
      this.getList(1);
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }
      const searchModel = _.cloneDeep(this.searchModel);
      searchOpenApp(this.compileSearchModel(searchModel))
        .then((resp) => {
          self.searchModel.pageNo = ++resp.pageNo;
          self.searchModel.count = resp.count;
          self.searchModel.pageSize = resp.pageSize;
          self.list = resp.data;
          self.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;
      return searchModel;
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    // 修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },

    init() {
      // 初始化搜索框中数据
      this.getList(1);
    },
  },
};
</script>
  
<style lang="scss" scoped></style>
  